import { Row, Col, List, Empty, Dropdown, Space, Modal, Button } from 'antd';
import { useState, useEffect } from 'react';
import { LeftOutlined, MoreOutlined, DownOutlined, SmileOutlined } from '@ant-design/icons';
import { GetArticleBySeriesId } from '../../../api/Home/index';
import { DeleteArticleById, DeleteArticleSeriesById } from '../../../api/Home/index';
import { success } from '../../../utils/Notification/index';
import MarkdownToJsx from '../../../components/MarkdownToJsx/MarkdownToJsx';
import LoginStore from '../../../store/Login/index';
const ArticleSeriesList = ({ status, Articles }) => {

    const { userInfo } = LoginStore();

    /**
     * 文章详情弹窗
     * 
     */

    const [isArticleDetailModalOpen, setIsArticleDetailModalOpen] = useState(false);

    const showArticleDetailModal = () => {//开启弹窗
        setIsArticleDetailModalOpen(true);
    };

    const handleArticleDetailModalOk = () => {//确认关闭弹窗
        setIsArticleDetailModalOpen(false);
    };

    const handleArticleDetailModalCancel = () => {//关闭弹窗
        setIsArticleDetailModalOpen(false);
    };


    const [removeSeriesId, setRemoveSeriesId] = useState(0);//预备删除系列id


    /**
     * 确认删除系列弹窗
     * 
     */
    const [open, setOpen] = useState(false);//展开状态
    const showModal = () => {//展开Modal函数
        setOpen(true);
    };
    const handleOk = () => {//确认关闭弹窗
        console.log('ok');
        DeleteArticleSeriesById(removeSeriesId,userInfo.id).then(({ data }) => {
            success('删除成功', '');
            window.location.reload();
        })
        setOpen(false);
    };
    const handleCancel = () => {//取消关闭弹窗
        console.log('cancel');
        setOpen(false);
    };

    const [seriesId, setSeriesId] = useState(0);//系列id

    const [ArticleList, setArticleList] = useState([]);//文章列表

    const [CurrentArticle, setCurrentArticle] = useState({});//当前显示文章

    const DeleteArticle = (id) => {//删除文章的函数
        DeleteArticleById(id,userInfo.id).then(({ data }) => {
            console.log(data.data);

            success('删除成功', '');
        })
    }

    const DeleteArticleSeries = () => {//删除文章系列
        showModal();
    }

    const seriesMenu = [
        {
            key: '1',
            danger: true,
            label: 'delete series',
        }
    ];

    const dropDownMenu = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="">
                    editor
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="">
                    todo-item
                </a>
            ),
            icon: <SmileOutlined />,
            disabled: true,
        },
        {
            key: '3',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="">
                    todo-item
                </a>
            ),
            disabled: true,
        },
        {
            key: '4',
            danger: true,
            label: 'delete article',
        },
    ];

    const GetArticleListBySeriesId = (seriesId) => {//根据系列id获取文章列表
        GetArticleBySeriesId(seriesId).then(({ data }) => {
            console.log(data.data);

            setArticleList(data.data);
        })
    }

    if (status) {

        return (
            <>
                <Modal
                    width={1200}
                    title={CurrentArticle.title}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isArticleDetailModalOpen}
                    onOk={handleArticleDetailModalOk}
                    onCancel={handleArticleDetailModalCancel}
                >
                    <MarkdownToJsx content={CurrentArticle.content}/>
                </Modal>
                <Modal
                    open={open}
                    title="Title"
                    onOk={handleOk}
                    onCancel={handleCancel}
                    footer={(_, { OkBtn, CancelBtn }) => (
                        <>
                            <CancelBtn />
                            <OkBtn />
                        </>
                    )}
                >
                    <p>该系列删除后,该系列的文章都会被删除,你确定要继续删除吗?</p>
                </Modal>
                {
                    seriesId === 0 ? <List
                        size="large"
                        bordered
                        dataSource={Articles}
                        style={{ marginTop: '20px' }}
                        renderItem={item =>
                            <>
                                <List.Item>
                                    <a onClick={() => {
                                        setSeriesId(item);

                                        GetArticleListBySeriesId(item.id);
                                    }}>{item.name}</a>

                                    <div style={{ display: 'flex' }}>
                                        <p>{item.createTime.split('T')[0]}</p>
                                        <Dropdown menu={{
                                            items: seriesMenu,
                                            onClick: (info) => {
                                                if (info.key === '1') {
                                                    console.log('删除', item.id);
                                                    // showModal();

                                                    setRemoveSeriesId(item.id);

                                                    DeleteArticleSeries(item.id);
                                                }
                                            }
                                        }}>
                                            <MoreOutlined onClick={
                                                (e) => {
                                                    e.preventDefault
                                                }} style={{ marginLeft: '10px' }} />
                                        </Dropdown>

                                    </div>

                                </List.Item>
                            </>
                        }
                    /> : <>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            marginTop: '20px'
                        }}>
                            <LeftOutlined onClick={() => { setSeriesId(0) }} />
                            <p>{seriesId.name}</p>
                            <p></p>
                        </div>
                        <Row style={{ marginTop: '20px', display: 'flex' }}>
                            {
                                ArticleList.length != 0 ?
                                    ArticleList.map((item) => {
                                        return (
                                            <Col key={item.id} span={11} style={{ marginLeft: '5px', marginTop: '10px' }}>
                                                {/**文章卡片 */}
                                                <div style={{ border: "1px solid pink" }} onClick={() => {
                                                    setCurrentArticle(item);
                                                    showArticleDetailModal();
                                                }}>
                                                    <div style={{
                                                        width: '100%',
                                                        height: '100px',
                                                        backgroundColor: 'pink',
                                                        display: 'flex',
                                                        justifyContent: 'center',
                                                        alignItems: 'center',

                                                    }}>
                                                        <p style={{
                                                            color: 'white',
                                                            fontSize: '18px',
                                                            fontWeight: 'bold'
                                                        }}>{item.title}</p>
                                                    </div>
                                                    <div style={{ display: "flex", justifyContent: 'space-between', alignItems: 'center', padding: '10px' }}>
                                                        <p style={{
                                                            lineHeight: '50px'
                                                        }}>{`${item.createTime.split('T')[0]} ${item.createTime.split('T')[1]}`}发布</p>
                                                        <Dropdown
                                                            menu={{
                                                                items: dropDownMenu,
                                                                onClick: (info) => {
                                                                    if (info.key === '4') {
                                                                        console.log('删除', item.id);
                                                                        DeleteArticle(item.id);
                                                                        setArticleList((pre) => {
                                                                            return pre.filter(i => i.id !== item.id);
                                                                        })
                                                                    }
                                                                }
                                                            }}
                                                        >
                                                            <a onClick={e => e.preventDefault()}>
                                                                <Space>
                                                                    <MoreOutlined />
                                                                </Space>
                                                            </a>
                                                        </Dropdown>
                                                    </div>
                                                </div>
                                            </Col>
                                        );
                                    })
                                    : <Empty></Empty>
                            }
                        </Row>
                    </>
                }
            </>
        );
    } else {
        <>
        </>
    }

}

export default ArticleSeriesList;